<template>
    <div class="infouserTop">
        <svg class="icon" aria-hidden="true" @click="$router.push('/')">
            <use xlink:href="#icon-zuojiantou"></use>
        </svg>
    </div>
    <div class="infouser">
        <img :src="user.data.profile.avatarUrl" alt="" class="profileimg">
        <div class="name">{{user.data.profile.nickname}}</div>
    </div>

</template>

<script>
import { defineComponent } from 'vue'
import { mapState } from 'vuex';

export default defineComponent({
    computed: {
        ...mapState(['user'])
    }
})
</script>

<style lang="less" scoped>
.infouserTop {
    width: 100%;
    height: .6rem;
    display: flex;
    align-items: center;
    background-color: rgb(35, 31, 31);

    .icon {
        fill: #fff;
    }
}

.infouser {
    width: 100%;
    height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(248, 97, 97);


    .profileimg {

        width: 50%;
        height: 50%;
        border-radius: 50%;
    }

    .name {
        width: 100%;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .6rem;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: #fff;
    }
}
</style>